import Link from "next/link";
import { Row, Col, Layout, Modal } from "antd";
import { UserOutlined, ShoppingOutlined } from "@ant-design/icons";
import styles from "./Header.module.scss";
import { useEffect, useState } from "react";
import router from "next/router";
import Container from "../Container/Container";
export default function Headers(props) {
  const { Header } = Layout;
  const [isLogin, setLogin] = useState(false);
  const toBag = () => {
    if (!localStorage.getItem('token')) {
      Modal.confirm({
        title: 'Please login',
        content: 'You have to login to do next step',
        onOk() {
          router.push(`/account/login?back=/shop/mybag`);
        },
      })

      return;
    }
    router.push(`/shop/mybag`);
  }
  const toAccount = () => {
    if (!localStorage.getItem('token')) {
      Modal.confirm({
        title: 'Please login',
        content: 'You have to login to do next step',
        onOk() {
          router.push(`/account/login?back=/account`);
        },
      })

      return;
    }
    router.push(`/account`);
  }
  useEffect(() => {
    const token = localStorage.getItem('token');
    token ? setLogin(true) : setLogin(false);
  }, [])

  return (
    <>
      <Header>
      <Container>
            {/* <div className="hidden-md mobile-menu-icon hidden-lg" onClick={() => setShow(true)}>
              <MenuOutlined style={{ fontSize: '20px' }} />
            </div> */}
            <div className={styles.logo}>
              <Link href='/'>
                <a className={styles.brand}>NINAMOKA</a>
              </Link>
            </div>
            <div className={styles.header}>

              <div
                className={styles["header-top-nav"]}
                onClick={(e) => e.preventDefault()}
              >
                <UserOutlined />
                {isLogin ?
                  <span className="pl5" onClick={toAccount}>My Account</span>
                  : <Link href="/account/login">
                    <a className="pl5">Sign In / Regsiter</a>
                  </Link>
                }
              </div>
              <div className={styles["header-top-wish"]}>
                <ShoppingOutlined />
                <a className="pl5" onClick={toBag}>My Bag</a>
              </div>
            </div>
            </Container>
      </Header>

    </>
  );
}
